/**
 * 1像素边框
 */

/*1像素的四边边框，给after设置border-radius可以有圆角效果*/
.onepx-border-all(@borderColor) {
    position: relative;
    border: none;
    &:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: solid 1px @borderColor;
        box-sizing: border-box;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
        }
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
            width: 300%;
            height: 300%;
            transform: scale(0.33333333);
            -webkit-transform: scale(0.33333333);
        }
    }
}

/*1像素上,下边框*/
.onepx-border-top-bottom(@borderColor) {
    position: relative;
    border: none;
    &:after {
        content: '';
        width: 100%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border-top: solid 1px @borderColor;
        border-bottom: solid 1px @borderColor;
        box-sizing: border-box;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
        }
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
            transform: scaleY(0.3333);
            -webkit-transform: scaleY(0.3333);
        }
    }
}
/*1像素上边框*/
.onepx-border-top(@borderColor) {
    position: relative;
    border: none;
    &:after {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
        border-top: solid 1px @borderColor;
        box-sizing: border-box;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
        }
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
            transform: scaleY(0.3333);
            -webkit-transform: scaleY(0.3333);
        }
    }
}

/*1像素下边框*/
.onepx-border-bottom(@borderColor,@px:1px) {
    position: relative;
    border: none;
    &:after {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom: solid @px @borderColor;
        box-sizing: border-box;
        transform-origin: left bottom;
        -webkit-transform-origin: left bottom;
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
        }
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
            transform: scaleY(0.3333);
            -webkit-transform: scaleY(0.3333);
        }
    }
}

/*1像素左边框*/
.onepx-border-left(@borderColor) {
    position: relative;
    border: none;
    &:after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-left: solid 1px @borderColor;
        box-sizing: border-box;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            transform: scaleX(0.5);
            -webkit-transform: scaleX(0.5);
        }
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
            transform: scaleX(0.3333);
            -webkit-transform: scaleX(0.3333);
        }
    }
}

/*1像素右边框*/
.onepx-border-right(@borderColor) {
    position: relative;
    border: none;
    &:after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        border-right: solid 1px @borderColor;
        transform-origin: right top;
        -webkit-transform-origin: right top;
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            transform: scaleX(0.5);
            -webkit-transform: scaleX(0.5);
        }
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
            transform: scaleX(0.3333);
            -webkit-transform: scaleX(0.3333);
        }
    }
}

/*1像素上、右边框*/
.onepx-border-top-right(@borderColor) {
    position: relative;
    border: none;
    &:after {
        content: '';
        width: 200%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        border-top: solid 1px @borderColor;
        border-right: solid 1px @borderColor;
        transform-origin: right top;
        -webkit-transform-origin: right top;
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            transform: scaleX(0.5);
            -webkit-transform: scaleX(0.5);
        }
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
            transform: scaleX(0.3333);
            -webkit-transform: scaleX(0.3333);
        }
    }
}
/*1像素左、下边框*/
.onepx-border-bottom-left(@borderColor) {
    position: relative;
    border: none;
    &:after {
        content: '';
        width: 100%;
        height: 200%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-left: solid 1px @borderColor;
        border-bottom: solid 1px @borderColor;
        box-sizing: border-box;
        transform-origin: left bottom;
        -webkit-transform-origin: left bottom;
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
        }
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
            transform: scaleY(0.3333);
            -webkit-transform: scaleY(0.3333);
        }
    }
}
/*1像素左、上边框*/
.onepx-border-top-left(@borderColor) {
    position: relative;
    border: none;
    &:after {
        content: '';
        width: 100%;
        height: 200%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-left: solid 1px @borderColor;
        border-top: solid 1px @borderColor;
        box-sizing: border-box;
        transform-origin: left bottom;
        -webkit-transform-origin: left bottom;
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
        }
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
            transform: scaleY(0.3333);
            -webkit-transform: scaleY(0.3333);
        }
    }
}